<template>
  <!-- 顶部导航栏 -->
  <van-nav-bar title="发表文章 / 动态" @click-left="onClickLeft" fixed>
    <template #left>
      <van-icon name="arrow-left" size="24" color="#000" />
    </template>
  </van-nav-bar>
  <div class="publish-articles-container">
    <rich-text-editing></rich-text-editing>
  </div>
  <!-- 底部发表按钮 -->
  <div class="bottom-btn">
    <van-button type="primary" round block style="height: 40px;margin: 5px 0;"
      color="linear-gradient(to right, #ff6034, #ee0a24)" @click="clickPublishBtn">发布</van-button>
  </div>
</template>

<script setup>
import richTextEditing from '../../components/richText/richTextEditing.vue';

import { Toast } from 'vant'

import { useArticleStore } from '../../store/article';
import router from '../../route';
const articleStore = useArticleStore()

// 点击左侧按钮返回上级路由
const onClickLeft = () => {
  history.back()
}
const clickPublishBtn = () => {
  if (articleStore.articleContent.title !== '' && articleStore.articleContent.content !== '') {
    console.log(articleStore.articleContent);

    articleStore.isPublish = true
    // 正则取出富文本中的图片地址
    var patt = /<img[^>]+src=['"]([^'"]+)['"]+/g;
    var imgList = [], temp;
    while ((temp = patt.exec(articleStore.articleContent.content)) != null) {
      imgList.push({ 'url': temp[1] });
    }
    console.log(imgList)

    Toast.success('发布成功');

    setTimeout(() => {
      router.push('/community')
    }, 800)

  } else {
    Toast.fail('请输入标题和内容');
  }
}
</script>

<style scoped>
.publish-articles-container {
  margin-top: 46px;
}

.bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: var(--van-address-list-add-button-z-index);
  box-sizing: border-box;
  width: 100%;
  padding-left: var(--van-padding-md);
  padding-right: var(--van-padding-md);
  background-color: var(--van-background-color-light);
}
</style>
